
<template>
  <div>
    <template v-for="item in menuList">
      <!-- 菜单 -->
      <el-submenu :index="item.id" v-if="item.type == 1" :key="item.id">
        <template slot="title">
          <i v-if="!item.icon" class="el-icon-star-on"></i>
          <img v-else data-v-38c5ac14="" :src="baseFileUrl + item.icon" class="el-icon-other" style="max-width: 30px; max-height: 30px; margin-right: 10px;">
          <span>{{ item.name }}</span>
        </template>
        <menu-items :menuList="item.childrenItems" />
        <!--递归调用-->
      </el-submenu>

      <!-- 页面 -->
      <el-menu-item
        :index="item.href"
        v-else-if="item.type == 2"
        :key="item.id"
        @click="saveActivePath(item.href)"
      >
          <i  v-if="!item.icon" class="el-icon-menu"></i>
          <img v-else data-v-38c5ac14="" :src="baseFileUrl + item.icon" class="el-icon-other" style="max-width: 30px; max-height: 30px; margin-right: 10px;">
          <span>{{ item.name }}</span>
        <menu-items :menuList="item.childrenItems" />
      </el-menu-item>
</template>
</div>
</template>


<script>
import utils from '../../../utils/sessionUtil'
import dataUtils from '../../../utils/dataUtils'
export default {
  name: 'MenuItems',
  props: ['menuList'],
  data() {
    return {
      baseFileUrl: dataUtils.baseFileUrl
    }
  },
  methods: {
    saveActivePath(activePath) {
      utils.session.set('activePath', activePath)
      this.$store.state.defaultIndex = activePath
    },
  },
}
</script>
<style scoped>
  /*隐藏文字*/
  .el-menu--collapse .el-submenu__title span {
    display: none;
  }
  /*隐藏文字*/
  .el-menu--collapse.el-menu span {
    display: none;
  }
</style>
